<template>
    <div class="saerch-line">
        <el-select v-model="filmState" class="m-2" placeholder="请选择电影类型" style="width: 240px; margin-right: 20px;">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-button type="primary" size="default" @click="getList">
            <i class="iconfont icon-sousuo"></i>
            搜索
        </el-button>
        <el-button type="primary" @click="openDialog">
            <i style="font-size: 26px;">+</i>
            添加</el-button>
    </div>
    <div class="tab-container">
        <el-table :data="list" style="width: 100%;" height="460" border>
            <el-table-column align="center" fixed label="编号" prop="id" width="60" />
            <el-table-column align="center" fixed label="类型" prop="type" width="120">
                <template #default="scope">
                    <el-tag type="success" v-if="scope.row.type == 1" size="default">正在热映</el-tag>
                    <el-tag type="info" v-else size="default">即将上映 </el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" label="2D/3D" prop="filmType" width="120" />
            <el-table-column align="center" label="封面" prop="poster" width="120">
                <template #default="scope">
                    <img :src="scope.row.poster.startsWith('http') ? scope.row.poster : 'http://tmp00002.learv.com/' + scope.row.poster"
                        width="40" height="40" alt="" />
                </template>
            </el-table-column>
            <el-table-column align="center" label="标题" prop="name" width="200" />
            <el-table-column align="center" label="观众评分" prop="grade" width="80" />
            <el-table-column align="center" label="地区" prop="nation" width="240" />
            <el-table-column align="center" label="时间/分钟" prop="runtime" width="80" />
            <el-table-column align="center" label="剧照" width="250">
                <template #default="scope">
                    <img v-for="(item, index) in JSON.parse(scope.row.photos || '[]')" :key="index" :src="item" width="40"
                        height="40" alt="" />
                </template>
            </el-table-column>
            <el-table-column align="center" fixed="right" label="操作" width="80">
                <template #default="scope">
                    <el-button type="danger" size="small" @click.prevent="deleteRow(scope.$index)">
                        <i class="iconfont icon-shanchu"></i>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="demo-pagination-block">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30, 40]" :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
    <el-drawer v-model="dialogVisible" title="影院添加" :before-close="handleClose" size="50%">
        <el-form :model="form" label-width="120px">
            <el-form-item label="2D/3D">
                <el-radio-group v-model="form.filmType" class="ml-4">
                    <el-radio label="2D" border value="2D" size="large"></el-radio>
                    <el-radio label="3D" border value="3D" size="large"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="封面">
                <Upload @uploadEvt="getAvatar" />
            </el-form-item>
            <el-form-item label="标题">
                <el-input v-model="form.name" placeholder="请输入标题" required />
            </el-form-item>
            <el-form-item label="评分">
                <el-input v-model="form.grade" />
            </el-form-item>
            <el-form-item label="地区">
                <el-input v-model="form.nation" placeholder="请输入地区" />
            </el-form-item>
            <el-form-item label="时间/分钟">
                <el-input v-model="form.runtime" placeholder="请输入时间/分钟" />
            </el-form-item>
            <el-form-item label="分类">
                <el-input v-model="form.category" placeholder="请输入分类，例如 爱情|剧情 等" />
            </el-form-item>
            <el-form-item label="描述">
                <!-- <el-input v-model="form.synopsis" resize="none" :rows="10" type="textarea" placeholder="请输入描述" /> -->
                <MyEditor @change="(val) => form.synopsis = val" />
            </el-form-item>
            <el-form-item label="演员" class="actorsBox">
                <Actors v-for="item in actorsList" @actorsEvt="upActors($event, item)" />
                <el-button type="info" class="addActor" @click="addActor">+</el-button>
            </el-form-item>
            <el-form-item label="剧照" class="actorsBox">
                <Photos v-for="(item, index) in photosList" @photosEvt="upPhotos($event, index)" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="add">
                    立即创建
                </el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { requestIns } from '@/utils/request'
import { ElMessage } from 'element-plus'
import Upload from '@/components/common/Upload.vue'
import Actors from '@/components/film/Actors.vue'
import Photos from '@/components/film/Photos.vue'
import MyEditor from '@/components/common/MyEditor.vue'
const dialogVisible = ref(false)
const srceenWidth = ref('50%')
const list = ref([])
const total = ref(0)
const filmState = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const small = ref(false)
const background = ref(true)
const disabled = ref(false)
const options = ref([
    {
        value: 0,
        label: '全部'
    },
    {
        value: 1,
        label: '正在热映'
    },
    {
        value: 2,
        label: '即将上映'
    }
])
const actorsList = reactive([
    { name: '', avatarAddress: '', role: '' }
])
const photosList = reactive([''])

const upPhotos = (photos, index) => {
    photosList[index] = 'http://tmp00002.learv.com/' + photos
    photosList.push('')
}
const addActor = () => {
    actorsList.push({ name: '', avatarAddress: '', role: '' })
}
const upActors = (info, item) => {
    item.name = info.name
    item.avatarAddress = 'http://tmp00002.learv.com/' + info.avatarAddress
    item.role = info.role
}
const form = reactive({
    filmType: '',
    id: -1,
    name: '',
    nation: '',
    poster: '',
    photos: '',
    runtime: '',
    grade: 0,
    type: '',
    synopsis: '',
    category: '',
    actors: '',
    cinema_id: -1,
    id: -1
})
onMounted(() => {
    getList()
    changeWidth()
})
window.addEventListener('resize', () => {
    changeWidth()
})
const getAvatar = (poster) => {
    form.poster = poster
}
const changeWidth = () => {
    if (window.innerWidth < 1000) {
        srceenWidth.value = '90%'
    } else {
        srceenWidth.value = '50%'
    }
}

const getList = async () => {
    const res = await requestIns.request('/fsdy/film/index', 'get', {
        pagenum: currentPage.value,
        pagesize: pageSize.value,
        type: filmState.value == 0 ? '' : filmState.value
    })
    console.log(res)
    if (res.state = 200) {
        list.value = res.list
        total.value = res.total
    }
}
const deleteRow = async (index) => {
    const item = list.value.find((item, idx) => idx == index)
    // console.log(item.id)
    const res = await requestIns.request('/fsdy/film/delete', 'delete', {
        id: item.id
    })
    // console.log(res)
    if (res.state === 200) {
        getList()
        ElMessage.success('删除成功')
    }
}
const openDialog = () => {
    dialogVisible.value = true
}


const add = async () => {

    const res = await requestIns.request('/fsdy/film/create', 'post', {
        filmType: form.filmType,
        name: form.name,
        nation: form.nation,
        poster: form.poster,
        photos: JSON.stringify(photosList.slice(0, photosList.length - 1)),
        runtime: form.runtime,
        grade: form.grade,
        synopsis: form.synopsis,
        category: form.category,
        actors: JSON.stringify(actorsList),
    }, {
        'Content-Type': 'application/x-www-form-urlencoded'
    })
    console.log(res)
    if (res.state == 201) {
        getList()
        ElMessage.success('添加成功')
    }
    dialogVisible.value = false
}

const handleSizeChange = (val) => {
    currentPage.value = 1
    pageSize.value = val
    getList()
}
const handleCurrentChange = (val) => {
    currentPage.value = val
    getList()
}
const handleClose = (done) => {
    done()
}
</script>

<style scoped lang="scss">
.saerch-line {
    background-color: #fff;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    display: flex;
    align-items: center;

    .el-input {
        width: 300px;
        margin-left: 20px;
        margin-right: 40px;
    }
}

.tab-container {
    background-color: #fff;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;

    .btn {
        padding-bottom: 15px;
    }
}

.demo-pagination-block {
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}


.actorsBox {
    ::v-deep(.el-form-item__content) {
        gap: 10px;
        display: flex;
    }

    .addActor {
        display: block;
        height: 130px;

    }
}
</style>